<template>
  <div style="text-align: center">
      <el-row>
      <el-col :span="8" v-for="(img , index) in imgData.thumbnail" >
          <el-image style="width: 95%; height: 110px"  :src="img"  lazy fit = "cover" @click="showBig(props.file_data.images ,index)"/>
      </el-col>
      </el-row>

  </div>

</template>

<script setup>

import {onMounted, reactive,watch} from "vue";
import {get_img} from "@/axios/weibo";
import { showImagePreview } from 'vant';



const props = defineProps([
   "file_data"])

const imgData = reactive({
    show_dialog: false,
    thumbnail: [],
    big_img:[],
    show_index:0
})

const open_img = () =>  showImagePreview({
    images: imgData.big_img,
    startPosition: imgData.show_index,

});

const showBig = (imgs, index) =>{
    imgData.show_index = index
    imgData.show_dialog = true
    if(imgData.big_img.length  == 0) {
        Array.from(imgs).forEach((e,index )=> {
            get_img({"path": e.filePath + e.fileName}).then(res => {
                imgData.big_img[index] = URL.createObjectURL(res.data)

            }).catch(err => {

            })
        })
    }

    open_img()

}
const getImg = ()=>{
    if(props.file_data.thumbnail.length > 0){
    Array.from(props.file_data.thumbnail).forEach(e=>{
        get_img({"path" : e.filePath + e.fileName}).then(res=>{
            imgData.thumbnail.push(URL.createObjectURL(res.data))

        }).catch(err=>{

        })
    })
    // Array.from(props.imgUrls).forEach(e=>{
    //     get_img({"path" : e.filePath + e.fileName}).then(res=>{
    //         imgData.big_img.push(URL.createObjectURL(res.data))
    //
    //     }).catch(err=>{
    //
    //     })
    // })
    }
}

watch(()=>props.file_data,
    ()=>{
        imgData.thumbnail = []
        getImg()
})
onMounted(()=>{
    getImg()
})

</script>

<style scoped>

</style>